<template>
    <div style="height: 90%;">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/' }"><i class="el-icon-lx-cascades"></i> 首页</el-breadcrumb-item>
                <el-breadcrumb-item> 订单管理</el-breadcrumb-item>
                <el-breadcrumb-item :to="{ path: '/indentjudge' }">评价管理</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="big-bg">
            <!-- 表单控件 -->
            <div class="from">
                <el-form :inline="true" :model="formInline" ref="formInline" class="demo-form-inline">

                    <el-form-item label="订单编号:" prop="order_id" class="m_right">
                        <el-input placeholder="手机编号" v-model="formInline.order_id" clearable></el-input>
                    </el-form-item>



                    <el-form-item label="服务内容:" prop="order_info" class="m_right">
                        <el-input placeholder="服务内容" v-model="formInline.order_info" clearable></el-input>
                    </el-form-item>



                    <el-form-item label="评价时间:" prop="date" class="m_right">
                        <div class="block">
                            <el-date-picker value-format="yyyy-MM-dd" unlink-panels v-model="formInline.date" type="daterange" range-separator="至"
                                start-placeholder="开始时间" end-placeholder="结束时间">
                            </el-date-picker>
                        </div>
                    </el-form-item>
                    <br>



                    <el-form-item label="评价星级:" prop="level" class="m_right">
                        <el-select v-model="formInline.level" placeholder="全部">
                            <el-option label="全部" value="0"></el-option>
                            <el-option label="一星" value="1"></el-option>
                            <el-option label="二星" value="2"></el-option>
                            <el-option label="三星" value="3"></el-option>
                            <el-option label="四星" value="4"></el-option>
                            <el-option label="五星" value="5"></el-option>
                        </el-select>
                    </el-form-item>


                    <el-button type="primary" class="m_right" @click="filter()">筛选</el-button>
                    <el-button type="text" class="m_right" @click="resetFrom('formInline')">清空筛选条件</el-button>


                </el-form>
            </div>


            <!-- 表格 -->
            <el-table :data="tableDate" border >
                <el-table-column fixed prop="id" label="订单编号" align="center">
                </el-table-column>
                <el-table-column prop="serviceitem" label="服务内容" align="center">
                </el-table-column>
                <el-table-column label="评价者" align="center">
                    <template slot-scope="scope">
                        <p>{{ scope.row.username }}</p>
                        <p>{{ scope.row.phone }}</p>
                    </template>
                </el-table-column>
                <el-table-column prop="level" label="星级" align="center">
                </el-table-column>
                <!-- ********* -->
                <el-table-column prop="img" label="图片" align="center">
                    <template slot-scope="scope">
                        <img :src="`http://www.img.ttblog.cn/` + scope.row.img" alt="" style="height: 80px;">
                    </template>
                </el-table-column>
                <el-table-column label="评价内容" align="center">
                    <template slot-scope="scope">
                        <p>{{ scope.row.commentcontent }}</p>
                    </template>
                </el-table-column>
                <el-table-column prop="time" label="评价时间" align="center">
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <el-pagination background align="right" :current-page="params.pageNum" :page-sizes="[3, 10, 30, 50]"
                :page-size="params.pageSize" layout="sizes, prev, pager, next" :total="total"
                @size-change="handleSizeChange" @current-change="handleCurrentChange">
            </el-pagination>
        </div>
    </div>
</template>

<script>
import { selectcomment, getImg } from '../../../api/orderManager';
import tool from './tool'

export default {
    data() {
        return {
            // 表单
            formInline: {
                // 输入框
                order_id: '',
                order_info: '',
                // 下拉框
                level: '',
                // 日期
                date: '',
            },

            // 参数
            params: {
                id: '',   //订单编号
                sid: '',    //服务内容
                starttime: '',    //开始时间
                endtime: '',     //结束时间
                level: '',       //星级
                pageNum: 1,    //当前页
                pageSize: 3    //一页几条数据
            },

            // 表格
            tableDate: [],
            total: 4
        };
    },
    mounted() {
        //表单初始化
        this.tableInit()
        //图片接口
        // this.getImg()
    },
    methods: {
        // 表格数据接口
        async tableInit() {
            // 传参并请求接口
            let result = await selectcomment(this.params)
            // 成功
            if (result.code == 200) {
                // console.log(result);
                result.data.list.forEach(function (val) {
                    val.img = val.img.substring(0, val.img.indexOf(','));
                })

                this.total = result.data.total;
                this.tableDate = result.data.list;
            } else {   //如果查询失败
                this.tableDate = [];
            }
        },
        //每页条数改变时触发 选择一页显示多少行
        handleSizeChange(val) {
            // console.log(`每页 ${val} 条`);
            this.params.pageNum = 1;
            this.params.pageSize = val;
            this.tableInit()
        },
        //当前页改变时触发 跳转其他页
        handleCurrentChange(val) {
            // console.log(`当前页: ${val}`);
            this.params.pageNum = val;
            this.tableInit()
        },
        //清空表单
        resetFrom(formInline) {
            // console.log('111');
            this.$refs[formInline].resetFields();
            this.filter()
        },
        // 筛选
       async filter() {
            // console.log(this.formInline);
            this.params.pageNum = 1;
            //改变相关参数
            this.params.id = this.formInline.order_id;
            this.params.sid = this.formInline.order_info;
            this.params.level = this.formInline.level;
            // 处理时间
            if (this.formInline.date.length > 1) {
                this.params.starttime = this.formInline.date[0] + ' ' + '00:00';
                this.params.endtime = this.formInline.date[1] + ' ' + '00:00';
            } else {
                this.params.starttime = '';
                this.params.endtime = '';
            }
            // 重载表格
            // this.tableInit()
            // 传参并请求接口
            let result = await selectcomment(this.params)
            // 成功
            if (result.code == 200) {
                // console.log(result);
                result.data.list.forEach(function (val) {
                    val.img = val.img.substring(0, val.img.indexOf(','));
                })
                this.total = result.data.total;
                this.tableDate = result.data.list;
                this.$message({ message: '查询成功', type: 'success' })
            } else {   //如果查询失败
                this.tableDate = [];
                this.$message({ message: '查询失败！', type: 'error' })
            }
        }
    }
};
</script>

<style scoped>
.title {
    font-weight: bolder;
    padding: 20px 0;
}

.big-bg {
    background-color: #fff;
    height: 90%;
    padding: 0 30px;
    padding-top: 30px;
}

.from {
    background-color: #F5F5F5;
    padding: 20px 20px;
    box-sizing: border-box;
    margin-bottom: 40px;
}

.m_right {
    margin-right: 50px;
}
</style>
